<template>
  <input
    type="text"
    class="cdnInput"
    :readonly="readonly"
    :unselectable="unselectable"
    :value="modelValue" 
    @keyup="input($event.target)"
    @afterPaste="input($event.target)"
  />
</template>

<script setup>
const { type, modelValue } = defineProps({
  readonly: {
    type: Boolean,
    default: false,
  },
  unselectable: {
    type: String,
    default: ''
  },
  modelValue: {
    type: [String, Number],
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  }
});

const emit = defineEmits(['update:modelValue', 'change'])
let last = '';
const input = (target) => {
  const value = target.value;
  try {
    if (type == 'number') {
      if (isNaN(Number(value))) throw new Error();
    }
    last = value;
    emit('update:modelValue', last);
  } catch (error) {
    target.value = last;
    emit('update:modelValue', last);
  }
}
</script>

<style lang="scss" scoped>
.cdnInput {
  width: 200px;
  border: 1px solid #a7a7a7;
  border-radius: 4px;
  padding: 0 5px;
  width: 150px;
  height: 36px;
  outline: none;
  box-sizing: border-box;
}
.cdnInput:focus {
  border: 1px solid #48bcb9;
  transition: border 1s;
  -webkit-transition: border 1s;
}
</style>